<template>
  <div class="leftTopStyle" ref="bottomLeftRef">

  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { ref, onMounted } from "vue"
const bottomLeftRef = ref()
let ranking1 = `https://files.axshare.com/gsc/7WDST5/d4/eb/b6/d4ebb6bed5604e359b60606df79a9a92/images/大屏3/u714.svg?pageId=90485d84-bf5e-41bb-b221-8d5733b222cf`;
let ranking2 = `https://files.axshare.com/gsc/7WDST5/d4/eb/b6/d4ebb6bed5604e359b60606df79a9a92/images/大屏3/u720.svg?pageId=90485d84-bf5e-41bb-b221-8d5733b222cf`
let ranking3 = `https://files.axshare.com/gsc/7WDST5/d4/eb/b6/d4ebb6bed5604e359b60606df79a9a92/images/大屏3/u726.svg?pageId=90485d84-bf5e-41bb-b221-8d5733b222cf`
let ranking4 = `https://files.axshare.com/gsc/7WDST5/d4/eb/b6/d4ebb6bed5604e359b60606df79a9a92/images/大屏3/u732.svg?pageId=90485d84-bf5e-41bb-b221-8d5733b222cf`
let ranking5 = `https://files.axshare.com/gsc/7WDST5/d4/eb/b6/d4ebb6bed5604e359b60606df79a9a92/images/大屏3/u738.svg?pageId=90485d84-bf5e-41bb-b221-8d5733b222cf`
let ranking6 = `https://files.axshare.com/gsc/7WDST5/d4/eb/b6/d4ebb6bed5604e359b60606df79a9a92/images/大屏3/u714.svg?pageId=90485d84-bf5e-41bb-b221-8d5733b222cf`

let chartIcon = ``;

let xdata = {
  value: ['NO1.产品名称1', 'NO2.产品名称2', 'NO3.产品名称3', 'NO4.产品名称4', 'NO5.产品名称5']
};

let sdata = {
  value: [1000, 2000, 3000, 4000, 2000]
  // value: [10, 20, 30, 40, 50, 60]
}

const init = () => {
  let myCharts1 = echarts.init(bottomLeftRef.value);
  let option = ref({
    tooltip: {

      trigger: 'axis',
      backgroundColor: '#081429',
      textStyle: {
        color: '#fff',
      },
      borderColor: "rgba(255,255,255,.2)",
      axisPointer: {
        lineStyle: {
          color: "rgba(255,255,255,.1)"
        },
      }
    },

    grid: {
      containLabel: true,
      // 边距自行修改
      bottom: '0%',
      left: '5%',
      top: '10%',
      right: '5%',
    },

    xAxis: {
      type: 'value',
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: [
      {
        type: 'category',
        data: xdata.value,
        inverse: true,
        axisLabel: {
          fontSize: '14px',
          inside: true,
          verticalAlign: 'bottom',
          lineHeight: 44,
          margin: 0,       //刻度标签与轴线之间的距离
          formatter: function (value, index) {
            console.log('value', value, index);

            // if (index > 2) {
            //   return `{z|}{img${index}|}{z|} {a|${value}}`
            // }
            return `{img${index}|} {a|${value}}`
          },
          rich: {
            a: {
              fontSize: '14px',
              color: '#D6E0FC',
              padding: [0, 0, 0, 0],
            },
            img0: {
              width: 34,
              height: 24,
              backgroundColor: {
                image: ranking1,
              },
            },
            img1: {
              width: 34,
              height: 24,
              backgroundColor: {
                image: ranking2,
              },
            },
            img2: {
              width: 34,
              height: 24,
              backgroundColor: {
                image: ranking3,
              },
            },
            z: {
              width: 6,
              height: 6,
            },
            img3: {
              width: 34,
              height: 24,
              backgroundColor: {
                image: ranking4,
              },
            },
            img4: {
              width: 34,
              height: 24,
              backgroundColor: {
                image: ranking5,
              },
            },
            img5: {
              width: 34,
              height: 24,
              backgroundColor: {
                image: ranking6,
              },
            }
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: '#13387a',
          },
        },
      },
      {
        type: 'category',
        data: xdata.value,
        inverse: true,
        axisLabel: {
          inside: true,
          verticalAlign: 'bottom',
          lineHeight: 44,
          margin: 0,       //刻度标签与轴线之间的距离
          formatter: function (value, index) {
            return `{a|${sdata.value[index]}}`
          },
          rich: {
            a: {
              fontSize: 14,
              color: '#73E3FF',
              padding: [4, 0, 0, 0],
            },
            u: {
              color: "#fff",
              fontSize: 14,
              padding: [2, 0, 0, 4]
            }
          },
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: '#13387a',
          },
        },
      }
    ],

    series: [
      {
        data: sdata.value,
        type: 'bar',
        barWidth: 8,
        showBackground: true,
        backgroundStyle: {
          color: '#D0DEEE1A'
        },
        itemStyle: {
          borderRadius: 40,
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: '#148BCE', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#73E3FF', // 0% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          }
        },
        label: {
          show: true,
          position: 'insideRight',
          distance: -15,
          formatter: () => {
            return `{z|}{a|}`
          },
          rich: {
            a: {
              widht: 30,
              height: 30,
              backgroundColor: {
                image: chartIcon
              }
            }
          }
        }
      }
    ]
  })

  myCharts1.setOption(option.value);
  window.addEventListener("resize", function () {
    myCharts1.resize();
  });
}

onMounted(() => {
  init()
})
</script>

<style lang="scss" scoped>
.leftTopStyle {
  width: 100%;
  height: 100%;
}
</style>